<script setup lang="ts">
const props = withDefaults(
  defineProps<{ modelValue?: boolean; checked: boolean }>(),
  {
    modelValue: undefined,
  }
);

const emit = defineEmits<{ (e: "onChanged", checked: boolean): void }>();

const isVModel = typeof props.modelValue !== "undefined";

// 声明一个用于表示复选框选中和非选中状态的1变量
const checked = isVModel ? useVModel(props) : ref(props.checked);

// 声明一个用于切换复选框状态的方法
function toggle() {
  checked.value = !checked.value;
  // 如果开发者使用的不是双向数据绑定
  if (!isVModel) {
    // 通过自定义事件的方式 通知父组件
    emit("onChanged", checked.value);
  }
}
watch(
  () => props.checked,
  () => {
    if (!isVModel) {
      checked.value = props.checked;
    }
  }
);
</script>
<template>
  <div class="xtx-checkbox" @click="toggle">
    <i class="iconfont icon-checked" v-if="checked"></i>
    <i class="iconfont icon-unchecked" v-else></i>
    <span v-if="$slots.default"><slot></slot></span>
  </div>
</template>

<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>
